import './index.scss'
import Seach from '../../components/Seach/index'
import LoginProps from '../../components/Login/index'
import All from '../../components/All/index'
import { useState,useEffect } from 'react'
const Nav=()=>{
    const [init,SetInit]=useState(false)
    const [userData, setUserData] = useState(null);
      const [isLoggedIn, setIsLoggedIn] = useState(false);
    const Login=()=>{
        SetInit(true)
    }
    const closeModal=()=>{
        SetInit(false)
    }
    const checkLoginStatus = () => {
    const token = localStorage.getItem('token');
    if (token) {
      setIsLoggedIn(true);
      const image = localStorage.getItem('image');
      const name = localStorage.getItem('name');
      setUserData({ image, name });
    } else {
      setIsLoggedIn(false);
      setUserData(null);
    }
  };
  useEffect(() => {
    checkLoginStatus();
  }, []);
const home=()=>{
    window.location.href='/'
}

const Design=()=>{
    window.location.href='/design2'
}
    return (    
        <div className="nav_header">
            <div className='nav_left'>
                <img src='https://s.ibaotu.com/img/activity/20240830/logo.gif'></img>
            </div>
             <div className='nav_center'>
                <ul>
                    <li onClick={home}>首页</li>
                    <li>全部分类<span className='iconfont icon-sanjiaoxing arrow'></span>
                    <div className='dandan'>
                        <All></All>
                    </div>
                    </li>
                    <li>更多<span className='iconfont icon-sanjiaoxing arrow'></span></li>
                </ul>

                <div className='seach'>
                    <Seach></Seach>
                </div>
            </div>
             <div className='nav_right'>
                <ul>
                    <li><img src='https://s.ibaotu.com/next/img/new/person.b254.png'></img><span>企业VIP授权</span></li>
                    <li><img src='https://s.ibaotu.com/next/img/new/ep.4814.png'></img><span>个人VIP</span></li>
                    <li ><img src='https://s.ibaotu.com/next/img/new/design.16dc.png'></img><span onClick={Design}>在线设计</span></li>
                  
                </ul>
                <div className='user'>
                    {/* <img src='../src/assets/images/1.png' className='tou'></img><span className='bold' onClick={login}>登录/注册</span> */}
                    {isLoggedIn && userData && (
                    <img src={userData.image} />
                    )}
                    {!isLoggedIn && (
                        <div>
                            <img src='../src/assets/images/1.png'></img>
                            <span className='bold' onClick={Login}>登录/注册</span>
                        </div>
                    
                    )}
                </div>
            </div>
            {
                init&&<LoginProps onClose={closeModal}></LoginProps>
            }
            
        </div>
        
    )   
}

export default Nav